<template>
  <div class="login-register">
    <div class="contain">
      <div class="big-box" :class="{ active: isLogin }">
        <!--  -->
        <div class="big-contain" key="bigContainLogin" v-if="isLogin">
          <div class="btitle">门诊医生登录</div>
          <div class="bform">
            <div class="d-input">
              <el-icon style="margin-right: 10px;"  size="25px"><User /></el-icon> <input type="text" placeholder="请填写用户名" v-model="form.useremail">
            </div>
            <div class="d-psw">
              <el-icon style="margin-right: 10px;" size="25px"><Key /></el-icon><input type="password" placeholder="请填写密码" v-model="form.userpwd">
            </div>
            <span class="errTips" v-if="docError">* 用户名或密码填写错误 *</span>
          
          </div>
          <button class="bbutton" @click="doc_login">登录</button>
        </div>
<!-- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| -->
        <div class="big-contain" key="bigContainRegister" v-else>
          <div class="btitle">管理员登录</div>
          <div class="bform">
            <div class="d-input">
              <el-icon style="margin-right: 10px;"  size="25px"><User /></el-icon> 
              <input type="text" placeholder="请填写用户名" v-model="form.username">
            </div>
            <div class="d-psw">
              <el-icon style="margin-right: 10px;" size="25px"><Key /></el-icon>
              <input type="password" placeholder="请填写密码" v-model="form.userpwd">
            </div>

            <span class="errTips" v-if="admError">* 用户名或密码填写错误 *</span>

          </div>
          <button class="bbutton" @click="adm_login">登录</button>
        </div>
      </div>


      <div class="small-box" :class="{ active: isLogin }">
        <div class="small-contain-right" key="smallContainRegister" v-if="isLogin">
          <div class="stitle">你好，门诊医生</div>
          <p class="scontent">为病人看诊</p>
          <button class="sbutton" @click="changeType">切换到管理员</button>
        </div>
        <div class="small-contain-left" key="smallContainLogin" v-else>
          <div class="stitle">你好，管理员</div>
          <p class="scontent">开始系统管理</p>
          <button class="sbutton" @click="changeType">切换到门诊医生</button>
        </div>
      </div>

    </div>
  </div>
<!-- _______________________________________________________________________________________
            <div class="col-md-3">
                <a href="javascript:void(0);" class="btn-green mt-20px">
                    <i class="fas fa-calendar-week"></i>Make a Payment
                </a>
            </div>
            <div>
              <el-button
                type="primary"
                class="custom-button"
                :class="{ active: isActive }"
                @click="toggleActive"
              >
                Click Me
              </el-button>
            </div>

            <div>
    <button
      class="his-button"
      @click="handleClick"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
      :class="{ clicked: isActive, disabled: isLogin }"
    >
      <span>{{ isLogin ? 'Logged In' : 'Login' }}</span>
    </button>
  </div> -->

</template>

<script setup>

import { User,Key} from "@element-plus/icons-vue";

import { ref } from 'vue'
const isLogin = ref(true)
const docError = ref(true)

const admError = ref(true)
const form = ref({
  username: '',
  useremail: '',
  userpwd: ''
})
// const isActive=ref(false);

// const toggleActive=()=> {
//       isActive.value = !isActive.value;
//     }

const changeType = () => {
  isLogin.value = !isLogin.value
  form.value.username = ''
  form.value.useremail = ''
  form.value.userpwd = ''
}
// const login = () => {
// console.log(passwordError);
// }
////////////////////////////////


// function handleClick() {
//   isActive.value = !isActive.value
//   if (!isLogin.value) {
//     // 处理登录逻辑
//     // ...
//   }
// }

// function handleMouseOver() {
//   if (!isLogin.value) {
//     isActive.value = true
//   }
// }

// function handleMouseLeave() {
//   isActive.value = false
// }


</script>

<style scoped="scoped" lang="scss">

.custom-button {
  height: 1px;
  width: 1px;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.custom-button.active {
  background-color: #ff9900;
  box-shadow: 0 0 10px rgba(0, 0, 0, 3);
}
.his-button {
  height: 100px;
  width: 100px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s;
}

.his-button span {
  position: relative;
  z-index: 1;
}

.his-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(12, 5, 241, 0.888);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.his-button.clicked::after {
  width: 200%;
  height: 200%;
  opacity: 1;
}

.his-button:hover:not(.disabled)::after {
  width: 200%;
  height: 200%;
  opacity: 0.3;
}

.his-button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
$TransTime:0.5s;
$TransTimeSmall:$TransTime;
$TransTimeBig:$TransTime+0.15s;
.login-register {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  // background-image: ;
}

.contain {
  width: 60%;
  height: 60%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
    0 0 6px #f0f0f0;
}

.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all $TransTimeBig;
}

.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btitle {
  font-size: 1.5em;
  font-weight: bold;
  color: rgb(57, 167, 176);
}

.bform {
  width: 100%;
  height: 40%;
  padding: 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .d-input{
    width: 71.8%;
   
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 调整每组之间的间距 */
    
  }
  
  .d-psw{
    width: 71.8%;
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 调整每组之间的间距 */
  }
}

.bform .errTips {
  display: block;
  width: 50%;
  text-align: left;
  color: red;
  font-size: 0.7em;
  margin-left: 1em;
}

.bform input {
  width: 100%;
  height: 70px;
  border: none;
  outline: none;
  border-radius: 10px;
  padding-left: 2em;
  background-color: #f0f0f0;
  font-size: large;

}

.bbutton {
  width: 20%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  // background: radial-gradient(rgb(24, 74, 212),rgba(255, 255, 255),);
  background-color: rgb(45, 162, 96);
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

.small-box {


  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all $TransTimeSmall;//从右往左
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
.small-contain-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    background: linear-gradient(135deg, rgb(119, 173, 178), rgb(24, 74, 212),rgb(132, 154, 234));

}
.small-contain-right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    background: linear-gradient(-135deg, rgb(119, 173, 178), rgb(24, 74, 212),rgb(132, 154, 234));

}
}



.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scontent {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}

.sbutton {
  width: 65%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  // background-color: transparent;
  background:  radial-gradient(rgb(24, 74, 212),#79bbff,);
  color: #ffffff;
  font-size: 0.9em;
  cursor: pointer;
}

.big-box.active {
  left: 0;
  transition: all $TransTimeBig;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all $TransTimeSmall;
  //animation: curveAnimation 4s ;//infinite,加上后可以一直循环
}
@keyframes curveAnimation {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translate(200px,200px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  50% {
    transform: translate(400px,0px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  75% {
    transform: translateX(200px,-200px);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    transform: translateX(0);
  }
}


</style>
